<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Search, Plus, Timer } from '@element-plus/icons-vue'
import { useI18n } from "vue-i18n";
import { addNewPrj, getPrjList } from "@/api/prjmgr.js"
import { ElMessage } from "element-plus"
const { t } = useI18n();

const input1 = ref('');
const tableData = ref([
  {
    prj_name: '虚拟币合约',
    last_work_time: '2016-05-02 15:30:00',
  },
]);
const dialogVisible = ref(false);
const newPrjName = ref('');


const handleCreatePrj = () => {
  console.log(dialogVisible.value);
  dialogVisible.value = true;
}

const handleAddNewPrjSubmitForm = async () => {
  const result = await addNewPrj({
    'prj_name': newPrjName.value
  });
  console.log(result);
  if (result.code === 200) {
    ElMessage.success('新建项目成功');
    dialogVisible.value = false;
  }
  else {
    ElMessage.error(result.message);
  }
}

onMounted(async () => {
  const result = await getPrjList({});
  if (result.code === 200) {
    tableData.value = result.data;
  }
});
</script>

<template>
  <div>
    <div style="display: flex; gap: 8px; padding: 8px; background: white;">
      <el-input
        v-model="input1"
        style="flex: 1;"
        :placeholder="t('search.pureSearch')"
        :prefix-icon="Search"
      />
      <el-button type="primary" :icon="Plus" @click="handleCreatePrj"/>
    </div>
  </div>
  <div>
    <el-table :data="tableData" :show-header="false">
      <el-table-column label="Date">
        <template #default="scope">
          <div style="width: 100%; display: flex; gap: 4px; align-items: center">
            <div style="flex:1;">{{ scope.row.prj_name }}</div>
            <div>{{ scope.row.last_work_time }}</div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog
    v-model="dialogVisible"
    :title="t('prj.pureNewPrj')"
    width="500"
  >
    <el-input v-model="newPrjName" :placeholder="t('prj.purePleaseInputPrjName')"></el-input>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">
          {{ t("buttons.pureClose") }}
        </el-button>
        <el-button type="primary" @click="handleAddNewPrjSubmitForm">
          {{ t("buttons.pureConfirm") }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>